<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="9">
      </el-col>
      <el-col :span="2" :offset="6">
        <div>
          <el-statistic group-separator="," :value="totalArtWorkCount" title="已支付订单数量" ></el-statistic>
        </div>

      </el-col>
      <el-col :span="2">
        <div>
          <el-statistic group-separator="," :value="totalNewUserCount" title="新增用户数" ></el-statistic>
        </div>
      </el-col>
      <el-col :span="2" >
        <div>
          <el-statistic group-separator="," :value="income" title="总收入" ></el-statistic>
        </div>

      </el-col>
      <el-col :span="2">
        <div>
          <el-statistic group-separator="," :value="payout" title="总支出" ></el-statistic>
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-statistic group-separator="," :value="profit" title="总利润" ></el-statistic>
        </div>
      </el-col>
      <el-col :span="5"></el-col>
    </el-row>
    <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="16" :offset="8">
        <el-radio-group v-model="selectedRange" @change="updateChartData">
          <el-radio label="week">最近一周</el-radio>
          <el-radio label="month">最近一个月</el-radio>
          <el-radio label="year">最近一年</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row><el-col>&nbsp;</el-col></el-row>

    <el-row><el-col></el-col></el-row>

    <el-row><el-col></el-col></el-row>
    <el-row>
     <el-col :span="12">
      <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
     </el-col>
     <el-col :span="12">
      <div ref="statisticsContainer" style="width: 100%; height: 400px;"></div>
     </el-col>
    </el-row>
  </div>
</template>

<script>

import { weekEchartsData,monthEchartsData,yearEchartsData} from "@/api/chartsData";

import * as echarts from 'echarts';
import dayjs from 'dayjs';

export default {
  name: "Index",
  data() {
    return {
      like: true,
      totalNewUserCount: 0,
      totalArtWorkCount: 0,
      income: 0,
      payout: 0,
      profit: 0,
      title: "增长人数",
      selectedRange: 'week',
      chart: null,
      chart1: null,
      // 版本号
    };
  },
  mounted() {
  
    this.updateChartData();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      this.chart1 = echarts.init(this.$refs.statisticsContainer);
    },
    updateChartData() {
      this.initChart();
      const range = this.selectedRange;
      let xAxisData = [];
      let orderData = [];
      let userData = [];
      let incomeData = [];
      let payoutData = [];
      let profitData = [];
      if (range === 'week') {
        weekEchartsData().then((res) => {
          res.weekDays.map((item) => {
            xAxisData.push(item);
          });
          orderData = res.orderData;
          userData = res.userData;
          incomeData = res.incomeData;
          payoutData = res.payoutData;
          profitData = res.profitData;
          this.totalArtWorkCount = res.totalArtWorkCount;
          this.totalNewUserCount = res.totalNewUserCount;
          this.income = res.income;
          this.payout = res.payout;
          this.profit = res.profit;
          
          const options = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['已支付订单数量', '新增用户数']
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                  rotate: 20 // 旋转标签以适应长日期
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '已支付订单数量',
                type: 'line',
                data: orderData
              },
              {
                name: '新增用户数',
                type: 'line',
                data: userData
              }
            ]
          };

          const options1 = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['总收入', '总支出', '总利润']
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                  rotate: 20 // 旋转标签以适应长日期
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '总收入',
                type: 'line',
                data: incomeData
              },
              {
                name: '总支出',
                type: 'line',
                data: payoutData
              },
              {
                name: '总利润',
                type: 'line',
                data: profitData
              }
            ]
          };

          this.chart.setOption(options);
          this.chart1.setOption(options1);
        });
       
      } else if (range === 'month') {
        monthEchartsData().then(res => {
          res.monthDays.map((item) => {
            xAxisData.push(item);
          });
        orderData = res.orderData;
        userData = res.userData;
        incomeData = res.incomeData;
        payoutData = res.payoutData;
        profitData = res.profitData;
        this.payout = res.payout;
        this.profit = res.profit;
        this.income = res.income;
        this.totalArtWorkCount = res.totalArtWorkCount;
        this.totalNewUserCount = res.totalNewUserCount;
    
        const options = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['已支付订单数量', '新增用户数']
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                  rotate: 20 // 旋转标签以适应长日期
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '已支付订单数量',
                type: 'line',
                data: orderData
              },
              {
                name: '新增用户数',
                type: 'line',
                data: userData
              }
            ]
          };

          const options1 = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['总收入', '总支出', '总利润']
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                  rotate: 20 // 旋转标签以适应长日期
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '总收入',
                type: 'line',
                data: incomeData
              },
              {
                name: '总支出',
                type: 'line',
                data: payoutData
              },
              {
                name: '总利润',
                type: 'line',
                data: profitData
              }
            ]
          };

        this.chart.setOption(options);
        this.chart1.setOption(options1);
      });
      } else if (range === 'year') {
        yearEchartsData().then(res => {
          res.yearMonths.map((item) => {
              xAxisData.push(item);
          });
          orderData = res.orderData;
          userData = res.userData;
          this.income = res.income;
          this.payout = res.payout;
          this.profit = res.profit;
          this.totalArtWorkCount = res.totalArtWorkCount;
          this.totalNewUserCount = res.totalNewUserCount;
          incomeData = res.incomeData;
          payoutData = res.payoutData;
          profitData = res.profitData;
          const options = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['已支付订单数量', '新增用户数']
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                  rotate: 20 // 旋转标签以适应长日期
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '已支付订单数量',
                type: 'line',
                data: orderData
              },
              {
                name: '新增用户数',
                type: 'line',
                data: userData
              }
            ]
          };
          const options1 = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['总收入', '总支出', '总利润']
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                  rotate: 20 // 旋转标签以适应长日期
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '总收入',
                type: 'line',
                data: incomeData
              },
              {
                name: '总支出',
                type: 'line',
                data: payoutData
              },
              {
                name: '总利润',
                type: 'line',
                data: profitData
              }
            ]
          };
        this.chart.setOption(options);
        this.chart1.setOption(options1);
      });
      }
      
    },
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
  .like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

